<template>
    <el-dialog title="目标单" :visible.sync="psDVisible" width="45%" :before-close="handleClose">
        <div>
            <div class="psD_top">
                <p>下推到</p>
                <el-input placeholder="请输入内容" v-model="SearchVal">
                    <i slot="suffix" class="el-input__icon el-icon-search" @click="search()"></i>
                </el-input>
            </div>
            <div class="psD_cen">
                <div class="cen_Box">
                    <div class="lef_Box">
                        <ul class="lefBox_top">
                            <li>
                                <p>单据</p>
                            </li>
                            <li>
                                <p>日期</p>
                            </li>
                            <li>
                                <p>创建人</p>
                            </li>
                        </ul>
                        <ul class="lefBox_warp" v-if="pushDown.length == 0">
                            <li v-for="(item, index) in arr" :key="index">
                                <p>{{ item.receipts }}</p>
                                <p>{{ item.date }}</p>
                                <p>{{ item.creator }}</p>
                            </li>
                        </ul>
                        <ul class="lefBox_warp" v-else>
                            <li v-for="(item, index) in pushDown" :key="index">
                                <p>{{ item.receipts }}</p>
                                <p>{{ item.date }}</p>
                                <p>{{ item.creator }}</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="close" size="medium">取 消</el-button>
            <el-button type="primary" size="medium" @click="sure">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
export default {
    name: 'Fil',
    props: ['psDVisible'],
    data() {
        return {
            disa: null,
            SearchVal: '',
            arr: [
                {
                    receipts: '订购单',
                    date: '2020年9月28日',
                    creator: '郝书涛'
                },
                {
                    receipts: '订购单',
                    date: '2020年9月28日',
                    creator: '郝书涛'
                },
                {
                    receipts: '订购单',
                    date: '2020年9月28日',
                    creator: '郝书涛'
                },
                {
                    receipts: '订购单',
                    date: '2020年9月28日',
                    creator: '郝书涛'
                },
                {
                    receipts: '订购单',
                    date: '2020年9月28日',
                    creator: '郝书涛'
                },
                {
                    receipts: '订购单',
                    date: '2020年9月28日',
                    creator: '郝书涛'
                },
                {
                    receipts: '订购单',
                    date: '2020年9月28日',
                    creator: '郝书涛'
                },
                {
                    receipts: '采购单',
                    date: '2020年9月22日',
                    creator: '郝书涛'
                },
                {
                    receipts: '退料单',
                    date: '2020年9月22日',
                    creator: '郝书涛'
                }
            ],
            pushDown: []
        };
    },
    mounted() {},
    methods: {
        search() {
            let pushDown = [];
            this.arr.forEach((v, i) => {
                if (v.receipts.includes(this.SearchVal)) {
                    pushDown.push(v);
                }
            });
            this.pushDown = pushDown;
        },
        handleClose(done) {
            this.$confirm('', {
                title: '提示',
                message: '确认删除？',
                iconClass: 'el-icon-question'
            }).then(() => {
                this.$emit('update:psDVisible', false);
            });
        },
        close() {
            this.$emit('update:psDVisible', false);
        },
        sure() {
            this.$emit('update:psDVisible', false);
        }
    }
};
</script>
<style lang="less"scoped>
.psD_top {
    width: 100%;
    display: flex;
    align-items: center;
    p {
        width: 80px;
        text-align: center;
    }
    .el-input {
        width: 50%;
    }
}
.psD_cen {
    width: 100%;
    border: 1px solid #ccc;
    margin-top: 1.25rem;
    overflow: auto;
    padding: 1.75rem 0.92rem;
    box-sizing: border-box;
    .cen_Box {
        width: 100%;
        height: 30.25rem;
        overflow: auto;
        margin-left: 5px;
        .lef_Box {
            width: 98%;
            border: 1px solid #ccc;
            .lefBox_top {
                width: 100%;
                display: flex;
                padding: 0 4.5rem;
                border-bottom: 1px solid #ccc;
                box-sizing: border-box;
                line-height: 2.5rem;
                font-size: 1.13rem;
                li {
                    flex: 1;
                }
            }
            .lefBox_warp {
                width: 100%;
                li {
                    display: flex;
                    line-height: 2.5rem;
                    padding: 0 4.5rem;
                    border-bottom: 1px solid #ccc;
                    box-sizing: border-box;
                    color: #545454;
                    font-size: 1.13rem;
                    p {
                        flex: 1;
                    }
                }
            }
        }
    }
}

.cen_Box::-webkit-scrollbar {
    width: 0.65rem;
    background-color: #fff;
}

.cen_Box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #dcdfe6;
}
.dialog-footer {
    display: flex;
    justify-content: center;
    button:nth-child(1) {
        margin-right: 2.67rem;
    }
    button:nth-child(2) {
        margin-left: 2.67rem;
    }
}
</style>